<template>
  <div class="commentList">
    <div class="commentItem" v-for="(item, index) in commentArr" :key="index">
      <div class="currentCommentInfo">
        <div class="info">
          <img class="avatar" :src="item.createByFace" alt="" />
          <div class="textInfo">
            <div class="infoTop">
              <span class="nickName">{{ item.createByName }}</span>
              <div class="commentAction">
                <div
                  class="itemActionChild"
                  @click="handleFirstReplyBtn(item, index)"
                >
                  回复
                </div>
                <div class="itemActionChild">
                  <img src="@/assets/active/pic6.png" alt="" />
                  <span>{{ item.replyNum }}</span>
                </div>
                <div class="itemActionChild" @click="handleSetExpertDynamicCommentLike(item)">
                  <img src="@/assets/active/pic4.png" alt="" />
                  <span>{{ item.likes }}</span>
                </div>
              </div>
            </div>
            <span class="createTime">{{ item.createTime }}</span>
          </div>
        </div>
        <div class="content">{{ item.details }}</div>
        <!-- 一级回复框 -->
      <div class="replyInputBox" v-show="item.inputIng">
        <Input
          class="replyInput"
          v-model="firstCommentVal"
          type="textarea"
          :autosize="{ minRows: 4 }"
          :placeholder="'回复' + item.createByName"
        />
        <div class="replyInputBtn">
          <Button
            size="small"
            class="btn"
            @click="handleCancelFirstComment(item)"
            >取消</Button
          >
          <Button
            type="error"
            class="btn"
            size="small"
            @click="handleSubmitComment(item, 1,index)"
            >提交</Button
          >
        </div>
      </div>
      </div>
      <!-- 回复列表 -->
      <div class="replyInfo" v-if="item.replyArr && item.replyArr.length > 0">
        <div class="replyItem" v-for="(it, j) in item.replyArr" :key="j">
          <div class="info">
            <img class="avatar" :src="it.createByFace" alt="" />
            <div class="textInfo">
              <div class="infoTop">
                <span class="nickName">{{ it.createByName }}</span>
                <div class="commentAction">
                  <div
                    class="itemActionChild"
                    @click="handleTwoReplyBtn(item, it,j)"
                  >
                    回复
                  </div>
                  <div class="itemActionChild" @click="handleSetExpertDynamicCommentLike(it)">
                    <img src="@/assets/active/pic4.png" alt="" />
                    <span>{{ it.likes }}</span>
                  </div>
                </div>
              </div>
              <span class="createTime">{{ item.createTime }}</span>
            </div>
          </div>
          <div class="content">
            回复<span class="beReplied">{{ it.beReplied }}</span
            >：
            {{ it.details }}
          </div>
          <div class="replyInputBox" v-show="it.inputIng">
            <Input
              class="replyInput"
              v-model="secondCommentVal"
              type="textarea"
              :autosize="{ minRows: 4 }"
              :placeholder="'回复' + it.beReplied"
            />
            <div class="replyInputBtn">
              <Button size="small" class="btn" @click="it.inputIng = false"
                >取消</Button
              >
              <!-- 二级回复 -->
              <Button type="error" class="btn" @click="handleSubmitComment(it,2,index,j)" size="small">提交</Button>
            </div>
          </div>
          <div class="dividing"></div>
        </div>
        <div class="showMore" style="text-align:right" @click="getMoreReply(item)">{{ showMsg }}</div>
      </div>
    </div>
    <div class="showMore" @click="getMoreComment">{{ showCommentMsg }}</div>
  </div>
</template>

<script>
import {
  getExpertDynamicCommentById,
  addExpertDynamicComment,
  setExpertDynamicCommentLike
} from "@/api/experts.js";
export default {
  props: {
    dynamicId: {
      type: String,
      required: true,
    },
    index: {
      type: Number,
      required: true
    }
  },
  components: {},
  data() {
    return {
      params: {
        pageNumber: 1,
        pageSize: 10,
      },
      showMsg: "查看更多回复",
      showCommentMsg: "查看更多评论",
      commentArr: [],
      replyArr: [],
      firstCommentVal: "",
      secondCommentVal: "",
    };
  },
  created() {
    this.getFirstData();
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    // 给回复点赞
    handleSetExpertDynamicCommentLike(item) {
      setExpertDynamicCommentLike(item.id).then(res => {
        if(res.code === 200) {
          item.likes = res.result
          this.$forceUpdate()
        }
      })
    },
    // 取消回复 一级回复
    handleCancelFirstComment(item) {
      this.firstCommentVal = "";
      item.inputIng = false;
    },
    // 提交回复 index 是commentArr 的下标  j是replyArr的下标
    handleSubmitComment(item,level,index,j) {
      addExpertDynamicComment({
        dynamicId: this.dynamicId,
        details: level === 1 ?  this.firstCommentVal: this.secondCommentVal,
        pid: item.id,
        commentType: 1,
      }).then((res) => {
        if (res.code === 200) {
          this.$parent.getInfo(this.index, this.dynamicId);
          this.firstCommentVal = "";
          this.secondCommentVal = "";
          item.inputIng = false;
          // 把返回的对象注入数组里
          if(!this.commentArr[index].replyArr) {
            this.commentArr[index].replyArr = []
          }
            if(level === 1) {
              this.commentArr[index].replyArr.unshift({...res.result,inputIng:false})
            }
            if(level === 2) {
              this.commentArr[index].replyArr.splice(++j,0,{...res.result,inputIng:false})
              this.commentArr[index].total++
            }
            this.commentArr[index].replyNum = this.commentArr[index].replyNum + 1
            this.$forceUpdate()
        }
      });
    },
    // 一级回复的回复按钮
    handleFirstReplyBtn(item, index) {
      this.$set(this.commentArr, index,{
        ...item,
        inputIng: true
      } );
      console.log(item,'handleFirstReplyBtn')
      this.secondCommentVal = "";
      if(item.replyArr)
      item.replyArr.forEach((i) => (i.inputIng = false));

    },
    // 二级回复的回复按钮
    handleTwoReplyBtn(item, it,index) {
      this.firstCommentVal = "";
      this.secondCommentVal = "";

      item.inputIng = false;
      console.log(item,'handleTwoReplyBtn')
      if(item.replyArr) {
        item.replyArr.forEach((i) => (i.inputIng = false));
        this.$set(item.replyArr, index,{
        ...it,
        inputIng: true
      });
      }

      this.$forceUpdate()
      // it.inputIng = true;
    },
    // 获取更多评论
    getMoreComment() {
      if(this.total > this.commentArr.length) {
        this.params.pageNumber++
        this.getFirstData()
      }
    },
    // 获取一级评论
    getFirstData(val) {
      this.showCommentMsg = "加载中...";
      const params = val || this.params;
      getExpertDynamicCommentById({
        dynamicId: this.dynamicId,
        firstId: "0",
        ...params,
      }).then((res) => {
        if (res.code === 200) {
          this.commentArr = [...this.commentArr, ...res.result.records];
          this.total = parseInt(res.result.total);
          this.commentArr.forEach((item) => {
            if (!item.replyArr) {
              // 回复列表
              item.replyArr = [];
              // 是否正在回复
              item.inputIng = false;
              // 请求回复列表的参数
              item.params = {
                pageNumber: 1,
                pageSize: 3,
              };
            }
            this.getSecondData(item);
          })
            if(this.total > this.commentArr.length) {
              this.showCommentMsg = "查看更多评论...";
            } else {
              this.showCommentMsg = "没有更多了...";
            }
            if(this.total === 0) {
              this.showCommentMsg = "";
            }
        }
      }).catch(() => {
          this.showCommentMsg = "加载失败，请重试";
        });
    },
    // 查看更多回复
    getMoreReply(val) {
      if (val.total > val.replyArr.length) {
        val.params.pageNumber++;
        this.getSecondData(val);
      }
    },
    // 获取二级评论
    getSecondData(val) {
      this.showMsg = "加载中...";
      getExpertDynamicCommentById({
        dynamicId: this.dynamicId,
        firstId: val.id,
        pageNumber: val.params.pageNumber,
        pageSize: val.params.pageSize,
      })
        .then((res) => {
          if (res.code === 200) {
            val.replyArr = [...val.replyArr, ...res.result.records].map(
              (it) => {
                it.inputIng = false;
                return it;
              }
            );
            val.total = parseInt(res.result.total);
            if (val.replyArr.length < val.total) {
              this.showMsg = "查看更多回复";
            } else {
              this.showMsg = "没有更多了...";
            }
            if(val.total === 0) {
              this.showMsg = "";
            }
            const index = this.commentArr.findIndex((it) => it.id === val.id);
            this.$set(this.commentArr, index, val);
          } else {
            this.showMsg = "加载失败，请重试";
          }
        })
        .catch(() => {
          this.showMsg = "加载失败，请重试";
        });
    },
  },
};
</script>

<style scoped lang="scss">
.dividing {
  height: 1px;
  width: 100%;
  background-color: #ebebeb;
  margin: 20px 0;
}
.commentList {
  .commentItem {
    width: 100%;
    .content {
      margin-top: 16px;
      font-size: 14px;
      color: #333333;
      margin-left: 62px;
      margin-bottom: 19px;

      .beReplied {
        color: #878583;
        margin-left: 6px;
      }
    }

    .info {
      display: flex;
      align-items: center;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 12px;
      }

      .textInfo {
        flex: 1;

        .createTime {
          color: #acacac;
          font-size: 12px;
        }

        .infoTop {
          display: flex;
          justify-content: space-between;

          .nickName {
            color: #333333;
            font-size: 14px;
          }

          .commentAction {
            display: flex;
            align-items: center;

            .itemActionChild {
              // display: flex;
              // align-items: center;
              cursor: pointer;
              margin-left: 18px;
              font-size: 14px;

              img {
                width: 14px;
                height: 14px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }

    .replyInfo {
      background-color: #f9f9f9;
      padding: 20px;
      margin-left: 62px;
      margin-bottom: 10px;
    }
  }
}
.showMore {
  color: #2f7de7;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.replyInputBox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .replyInput {
    margin-bottom: 10px;
  }
  .replyInputBtn {
    display: flex;
    .btn {
      margin-left: 10px;
    }
  }
}
</style>
